<template>
    <div class ='pubpage'>
        <div class="status-bar" style="background-color:#fafafa;" :style="{'height': statusHeight}"></div>
        <div class="header">
            <text class="iconfont headerIcon" @click="back">&#xe606;</text>
            <text class="headerTextSize" @click="back">返回</text>
            <text class="headerRight iconfont" @click="releaseQus">发布</text>
        </div>
        <div class ='wrapper' >
            <input type="text" placeholder="请输入您的问题并以句号结尾" class="que-tit-input" :autofocus=false v-model="question"/>
            <textarea class="que-desc" placeholder="添加问题描述" v-model="questionDec"></textarea>
            <!-- <div class='imgWrapper'>
                <div class='imageEmpty'> <text class="iconfont addImg" @click="choseImg">+</text></div>
            </div> -->
            <div class="itemPics">
                <div class="imgBac" v-for="(itemImg1, index) in orderPicList" >
                <image :src="itemImg1" class="itemPic"></image>
                <text class="nativeplusfont close" @click="removeItem(index)">&#xe60d;</text>
                </div>
                <div class="imgBac" v-if="orderPicList.length >= 0 && orderPicList.length < 5">
                    <!-- <image src="bmlocal://assets/zst/uploadImg.png" class="itemPic" @click="uploadOrderImg()"></image> -->
                    <div class='imageEmpty'> <text class="iconfont addImg" @click="uploadOrderImg">+</text></div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
               title:'',
               content:'',
               picUrls:[],
               maxImgCount:5,
               orderPicList: [],
               commitPicList: [],
               question: '',
               questionDec: ''
            }
        },
        created(){
            this.statusHeight = Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40);
            
            
            // this.$notice.alert({
            //     title: '这是一个弹窗',
            //     message: '消息',
            // })
            //获取数据
        },
        ready(){
        
        },
        components: {  
         
        },
        methods: {
            back(){
                //返回
                this.$router.back();
            },
            publish(){
                //发布
            },
             removeItem(index) {
                // this.$notice.toast({ message: index})
                this.orderPicList.splice(index, 1);
                this.commitPicList = this.orderPicList;
            },
            uploadOrderImg() {

                let maxImg = 5 - this.orderPicList.length;

                var userInfo = this.$storage.getSync('UserInfo');

                this.token = userInfo.token;

                this.$image.pickAndUpload({
                    // url: '',                     // 自定义图片上传地址，默认上传地址是 eros.native.js 中的 image 地址
                    maxCount: maxImg,                 // 一次最多可选择图片数量 最大支持9张 默认是1
                    imageWidth: 1000,            // 图片宽度（根据宽度按比例裁剪）可以不传默认为 800px
                    // allowCrop: true,             // 是否允许编辑（只有当 maxCount == 1时 此参数才会生效） 默认是false
                    // params: {},                  // 传递的参数
                    header: {
                        'X-TMACW-APP-Token': this.token
                    }                   // 自定义请求 header
                })
                .then(resData => {
                    console.log("=============成功===============") 
                    console.log(JSON.stringify(resData))    // [url1, url2...]
                    if(resData[0].errno == 0){
                        // this.orderPicList = ['bmlocal://assets/zst/uploadImg.png', 'bmlocal://assets/zst/uploadImg.png', 'bmlocal://assets/zst/uploadImg.png'];
                        this.commitPicList = [];
                        resData.forEach((item, index) => {
                            // this.orderPicList[index] = item.data.url;
                            // Vue.set(this.orderPicList, index, item.data.url)
                            // let start = 0;
                            // if(this.orderPicList.length) {
                            //     start = this.orderPicList.length;
                            // }
                            this.orderPicList.push(item.data.url);
                            // this.orderPicList.splice(start, 1, item.data.url);
                            // Vue.set(this.orderPicList, start + index, item.data.url)
                        });
                        this.commitPicList = this.orderPicList;
                        console.log("::::::::::::::: " + this.commitPicList)
                        // this.orderPicList[index] = resData[0].data.url;
                        // Vue.set(this.orderPicList, index, resData[0].data.url)
                        // console.log("=============成功1===============" + this.headerImg) 
                    } else {
                        this.$notice.toast({ message: resData.errmsg})
                    }
                    
                }, error => {
                    console.log("=============失败===============") 
                    console.log(error)
                    this.$notice.toast({ message: "上传失败, 请重试"})
                })
            },
            releaseQus() {
                // this.$router.open({
                //     name: 'zst.home.orderInfo.finish',
                //     type: 'PUSH'
                // })
                const vm = this;

                if(!this.question){
                    this.$notice.toast({ message: "请填写问题"});
                    return;
                }

                if(!this.questionDec){
                    this.$notice.toast({ message: "请填写问题描述"});
                    return;
                }

                let hasPicture = false;

                if(this.commitPicList.length > 0) {
                    hasPicture = true;
                } else {
                    this.$notice.toast({ message: "请上传图片"});
                return;
                }

                var userInfo = this.$storage.getSync('UserInfo');

                this.token = userInfo.token;
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'question.publish', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        "content": this.questionDec,
                        "picUrls": this.commitPicList,
                        "title": this.question
                    },
                    header: {
                        'X-TMACW-APP-Token': this.token
                    }
                }).then(resData => {
                    // 成功回调
                    console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^")
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        this.$router.back({
                            length: 1,
                            type: 'PUSH',
                            callback() {
                                // 返回成功回调
                                // vm.infoObj.avatar = vm.headerImg;
                                console.log("::::::::::发送的补单返回值:::::::::::");
                                vm.$event.emit('refreshQuestionStatus')
                            }
                        })
                    } else if(resData && resData.errno == 501){
                        this.backLogin()
                    } else {
                        this.$notice.toast({ message: resData.errmsg});
                    }
                }, error => {
                    // 错误回调
                    console.log(error)
                    this.$notice.toast({ message: "问题提交失败，请重试"});
                })
            },
            backLogin () {
                this.$storage.setSync('LoginStatus', 'false')
                this.$storage.setSync('UserInfo', {})
                this.$router.open({
                    name: 'acw.home.login',
                    type: 'PUSH',
                    canBack: false,
                })
            },
            choseImg(){
                //选择图片
                let maxImg = 5 - this.orderPicList.length;

                var userInfo = this.$storage.getSync('UserInfo');

                this.token = userInfo.token;

                this.$image.pickAndUpload({
                    // url: '',                     // 自定义图片上传地址，默认上传地址是 eros.native.js 中的 image 地址
                    maxCount: maxImg,                 // 一次最多可选择图片数量 最大支持9张 默认是1
                    imageWidth: 1000,            // 图片宽度（根据宽度按比例裁剪）可以不传默认为 800px
                    // allowCrop: true,             // 是否允许编辑（只有当 maxCount == 1时 此参数才会生效） 默认是false
                    // params: {},                  // 传递的参数
                    header: {
                        'X-TMACW-APP-Token': this.token
                    }                   // 自定义请求 header
                })
                .then(resData => {
                    console.log("=============成功===============") 
                    console.log(JSON.stringify(resData))    // [url1, url2...]
                    if(resData[0].errno == 0){
                        // this.orderPicList = ['bmlocal://assets/zst/uploadImg.png', 'bmlocal://assets/zst/uploadImg.png', 'bmlocal://assets/zst/uploadImg.png'];
                        this.commitPicList = [];
                        resData.forEach((item, index) => {
                            // this.orderPicList[index] = item.data.url;
                            // Vue.set(this.orderPicList, index, item.data.url)
                            // let start = 0;
                            // if(this.orderPicList.length) {
                            //     start = this.orderPicList.length;
                            // }
                            this.orderPicList.push(item.data.url);
                            // this.orderPicList.splice(start, 1, item.data.url);
                            // Vue.set(this.orderPicList, start + index, item.data.url)
                        });
                        this.commitPicList = this.orderPicList;
                        console.log("::::::::::::::: " + this.commitPicList)
                        // this.orderPicList[index] = resData[0].data.url;
                        // Vue.set(this.orderPicList, index, resData[0].data.url)
                        // console.log("=============成功1===============" + this.headerImg) 
                    } else {
                        this.$notice.toast({ message: resData.errmsg})
                    }
                    
                }, error => {
                    console.log("=============失败===============") 
                    console.log(error)
                    this.$notice.toast({ message: "上传失败, 请重试"})
                })
            }
        }
    }
</script>
<style scoped>
.pubpage{
    width:750px;
    height:1000px;
    background-color:#fff;
}
.wrapper{
    padding-left:24px;
    padding-right:24px;
}
.que-tit-input{
    /* height:58px; */
    padding-left:24px;
    padding-top:40px;
    padding-bottom:20px;
    border-bottom-width:1px;
    font-size:36px;
    color:#333;
    border-style:solid;
    border-color:#333;
    margin-bottom:10px;
    /* backgroundColor:blue; */
}
.que-desc{
    color:#333;
    font-size:30px;
    height:400px;
    /* backgroundColor:red; */
}

.iconfont {
    font-family: iconfont;
}
.nativeplusfont {
    font-family: nativeplusfont;
}
.header{
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    height: 88px;
    align-items: center;
    /* width:750px; */
}
.headerTextSize{
    font-size: 35px;
    color: #222;
}
.headerIcon{
    font-size: 40px;
    color: #222;
    margin-left: 24px;
    margin-right: 15px;
}
.headerRight{
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 35px;
    height: 40px;
}
.imageEmpty{
    width:180px;
    height:180px;
    background-color:#ddd;
    align-items:center;
    text-align: center;
}
.addImg{
    font-size:180px;
    color:#fff;
}

.itemPics {
    width: 750px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: start;
    padding-bottom: 10px;
    /* background-color: blue; */
}

.imgBac {
  position: relative;
  background-color: #A5A5A5;
  width: 180px;
  height: 180px;
  margin-left: 33px;
  margin-right: 33px;
  margin-bottom: 18px;
  border-radius: 5px;
  /* overflow: visible; */
}

.itemPic {
    width: 180px;
    height: 180px;
    /* margin-left: 33px;
    margin-right: 33px;
    margin-bottom: 18px; */
    border-radius: 5px;
}

.close {
  position: absolute;
  font-size: 42px;
  color: red;
  /* z-index: 100; */
  top: 0px;
  right: 0px;
}
</style>